/*
 * @Description: 收藏站点名称修改页面
 * @Author: jun.fu
 * @Date: 2019-03-08 15:37:51
 * @Last Modified by:   jun.fu
 * @Last Modified time: 2019-03-08 15:37:51
 */
import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  Text
} from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import { defaultStackOptions } from '../utils/DefaultTitleOption'
import { iconDefaultColor } from '../configs/skin'
import fontsize from '../configs/fontsize'

export default class AddSearchName extends Component {
  static navigationOptions = ({ navigation }) => {
    let option = defaultStackOptions({ navigation })
    option.headerTitle = '自定义名称'
    option.headerRight = (
      <TouchableOpacity
        style={{ paddingRight: px2dp(30) }}
        onPress={navigation.getParam('complete')}
      >
        <Text style={{ color: iconDefaultColor }}>完成</Text>
      </TouchableOpacity>
    )
    return option
  }
  text = ''

  complete = () => {
    // 前一页面回调函数
    this.props.navigation.getParam('change')(this.text)
    // 返回
    this.props.navigation.goBack()
  }

  componentDidMount() {
    this.props.navigation.setParams({ complete: this.complete })
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={fontsize.fontsize32}
          maxLength={10}
          autoFocus
          placeholder={'请输入自定义名称...'}
          onChangeText={text => {
            this.text = text
          }}
        />
        <Image
          style={{
            width: '100%',
            height: px2dp(360),
            position: 'absolute',
            bottom: 0,
            zIndex: 1
          }}
          source={require('../../assets/img/background.png')}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})
